<template>
    <div class="singer-detail">
        <!-- 歌手信息展示 -->
        <div class="singer-info">
            <SongerTopInfo :songer="songer"/>
        </div>
        <!-- 歌手作品信息 -->
        <div class="singer-works">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="专辑" name="first">
                    <!-- 专辑内容 -->
                    <SingerAlbum :albumlist="albumlist" />
                    <!-- 分页 -->
                    <div class="pagination">
                            <el-pagination
                                @size-change="albumhandleSizeChange"
                                @current-change="albumhandleCurrentChange"
                                :current-page="albumCurrentPage"
                                :page-sizes="[30, 50, 100]"
                                :page-size="albumPageSize"
                                layout="prev, pager, next, jumper,total, sizes"
                                :total="albumCount">
                            </el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="热门歌曲" name="second">
                    <SongTable :songs="hotSongs"/>
                </el-tab-pane>
                <el-tab-pane label="MV" name="third">
                    <Mvdetail :mvs="mvs" v-if="mvcount !== 0"/>
                    <div class="no" v-else>
						<el-empty description="暂无MV" :image-size="200"></el-empty>
					</div>
                    <div class="pagination">
                            <el-pagination
                                @size-change="mvhandleSizeChange"
                                @current-change="mvhandleCurrentChange"
                                :current-page="mvCurrentPage"
                                :page-sizes="[30, 50, 100]"
                                :page-size="mvPageSize"
                                layout="prev, pager, next, jumper,total, sizes"
                                :total="mvcount">
                            </el-pagination>
                    </div>
                    
                </el-tab-pane>
                <el-tab-pane label="歌手详情" name="fourth">
                    <div v-if="songer.artist.briefDesc">
                        <p>{{songer.artist.briefDesc}}</p>
                    </div>
                    <div class="no" v-else>
						<el-empty description="暂无详情介绍" :image-size="200"></el-empty>
					</div>
                </el-tab-pane>
                <el-tab-pane label="相似歌手" name="fifth">
                    <Songerlist :singers="similarsinger" v-if="similarsinger.length !== 0"/>
                    <div class="no" v-else>
						<el-empty description="暂无相似歌手" :image-size="200"></el-empty>
					</div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
import SongerTopInfo from "./Childcomps/SongerTopInfo.vue";
import SingerAlbum from "./Childcomps/SingerAlbum.vue";
import SongTable from "@/components/content/SongTable.vue";
import Mvdetail from "@/components/content/mvlist/Mvdetail.vue";
import Songerlist from "@/components/content/singerlist/Songerlist.vue";

export default {
    name: "",
    components: { SongerTopInfo, SingerAlbum, SongTable, Mvdetail, Songerlist },
    inject:['reload'],
    data() {
        return {
            id: "",
            // 歌手的信息
            songer: {},
            activeName:'first',
            // 专辑数据
            albumlist:[],
            // 专辑的数目
            albumCount:0,
            // 专辑当前页数
            albumCurrentPage:1,
            // 专辑每一页展示的数据
            albumPageSize:30,
            // 歌手热门歌曲
            hotSongs:[],
            // 歌手MV数目
            mvs:[],
            // mv的数目
            mvcount:0,
            mvCurrentPage:1,
            mvPageSize:30,
            // 相似歌手
            similarsinger:[]
        };
    },
    created() {
        this.id = this.$route.params.id;
        // 根据歌手的id 获取歌手的信息
        this.getSongerDetailBy();
        // 获取歌手的专辑信息，
        this.getSongerAlbumBy();
    },
    methods: {
        // 获取歌手基本信息
        async getSongerDetailBy() {
            let resSonger = await this.$API.songer.getSongerDetail(this.id);
            if (resSonger.code == 200) {
                this.songer = resSonger.data;
                this.albumCount = resSonger.data.artist.albumSize;
            }
        },
        // 获取歌手的专辑
        async getSongerAlbumBy(){
            let offset = (this.albumCurrentPage - 1) * this.albumPageSize;
            let resAlbum = await this.$API.songer.getSongerAlbum(this.id,offset,this.albumPageSize);
            this.albumlist = resAlbum.hotAlbums;
        },
        // 歌手的MV
        async getSongerMVBy(){
            let resMv = await this.$API.songer.getSongerMV(this.id);
            this.mvs = resMv.mvs;
            this.mvcount = this.mvs.length
        },
        // 获取相似歌手
        async getSingerSimiBy(){
            let resSinger = await this.$API.songer.getSongerSimi(this.id)
            this.similarsinger = resSinger.artists;
        },
        // 获取歌手热门歌曲
        async getSongerHotSong(){
            let resHot = await this.$API.songer.getSingerHotSong(this.id);
            this.hotSongs = resHot.hotSongs;
        },
        albumhandleCurrentChange(page){
            this.albumCurrentPage = page;
            this.getSongerAlbumBy();
        },
        albumhandleSizeChange(size){
            this.albumCurrentPage = 1;
            this.albumPageSize = size;
            this.getSongerAlbumBy();
        },
        handleClick(tabs){
            if(tabs.label == '热门歌曲'){
                this.getSongerHotSong();
            }else if(tabs.label == 'MV'){
                this.getSongerMVBy();
            }else if(tabs.label == '相似歌手'){
                this.getSingerSimiBy();
            }
        },
        mvhandleSizeChange(size){
            this.mvCurrentPage = 1;
            this.mvPageSize = size;
            this.getSongerMVBy();
        },
        mvhandleCurrentChange(page){
            this.mvCurrentPage = page;
            this.getSongerMVBy();
        }

    },
    watch:{
        $route(to,form){
            if(to !== form){
                this.reload();
            }
        }
    }
    
}
</script>
<style lang="less" scoped>
    .singer-works{
        margin-left: 10px;
    }
    .pagination{
        text-align: center;
    }
    .no {
	width: 100%;
	text-align: center;
	font-size: 24px;
	font-weight: 700;
}
</style>